<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/artDialog/skins/simple-star.css}" />
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/webjars/star/css/buttons.css}" />
</head>
<body>
  <div class="edit-container">
    <input type="text" name="areaName1" placeholder="选择城市">
    <input type="text" name="areaName2" placeholder="选择城市">
  </div>
  <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/jquery.artDialog.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/artDialog/js/iframeTools.source.js}"></script>
  <script type="text/javascript" th:src="@{/webjars/star/js/star.utils.js}"></script>
  <script type="text/javascript" th:inline="javascript">
      $(function() {
        new UtilsHandle({
          choose: [
            {
              object: $("input[name=areaName1]"),
              service: "distributionRegionService",
              title: "选择分销地区1",
              width: "800px",
              height: "500px",
              callback: function(rowObject){
                $("input[name=areaName1]").val(rowObject.name);
              }
            },
            {
              object: $("input[name=areaName2]"),
              service: "distributionRegionService",
              title: "选择分销地区2",
              width: "400px",
              height: "200px",
              callback: function(rowObject){
                $("input[name=areaName2]").val(rowObject.name);
              }
            }
          ]
        },{});
      });
    </script>
</body>
</html>